• File: hub_webcnt_maintain_1.php
  • Full Path: C:/htdocs/reeft_gps_test/REEFTintegrationLog/saved/hub_webcnt_maintain_1.php
  • Date Modified: 04/30/2025 7:56 AM
  • File size: 76.95 KB
  • MIME-type: text/x-php
  • Charset: utf-8
<?php
//======================================================================================
//
// Function: Maintain  HUB_WEBCNT
//
// Programmer: DKXJJ
// Date      : 2024-08-09
//
// Copyright Reeft A/S (c) - 2024
//======================================================================================

// https://stackoverflow.com/questions/56062658/clicking-programmatically-on-the-arrows-of-html-inputs-type-number

// $(this).off('shown.bs.modal');		<=== MODAL
// ===> https://stackoverflow.com/questions/21015719/shown-bs-modal-fires-multiple-times-when-you-close-and-reopen-modal

//======================================================================================
// Get input
//======================================================================================


//======================================================================================
// Make line uppercase
//======================================================================================


//======================================================================================
// General config
//======================================================================================
	include "config/config.php";

//======================================================================================
// Check if user is logged in?
//======================================================================================
	include "login_check.php";

//======================================================================================
// Get session variables
//======================================================================================

	include "include/getsession.php";


	// include "include/uuid_create.php";
	// include "include/generate_password_md5.php";

//======================================================================================
// Set language
//======================================================================================

	include "include/set_language.php";

//======================================================================================
// Set defaults
//======================================================================================

	// $pk_reference  = $_SESSION['session_dft_pk_reference'];
	// $referenceCode = $_SESSION['session_dft_referencecode'];
	// $referenceName = $_SESSION['session_dft_referencename'];

//======================================================================================
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<title><?php echo $datahub_text0001 ?></title>

	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="REEFTvisual - Stoptime">
    <meta name="author" content="REEFT A/S">
    <link rel="icon" href="images/favicon/favicon.ico">

    <!-- Bootstrap / jQuery -->
    <link href="css/bootstrap4.3.1/css/bootstrap.custom.min.css" rel="stylesheet">
    <link href="css/bootstrap4.3.1/css/themes/bootstrap.custom.min.css" rel="stylesheet">

	<link href="css/bootstrap4.3.1/css/normalize.css" rel="stylesheet" type="text/css">

	<link href="css/sticky-footer.css" rel="stylesheet" type="text/css">

    <!-- Custom styles for this template -->
    <link href="css/custom.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">


	<script src="css/fontawesome6.5.1/js/all.min.js"></script>
	<script src="css/fontawesome6.5.1/js/sharp-light.min.js"></script>
	<script src="css/fontawesome6.5.1/js/sharp-regular.min.js"></script>
	<script src="css/fontawesome6.5.1/js/sharp-solid.min.js"></script>
	<script src="css/fontawesome6.5.1/js/sharp-thin.min.js"></script>


	<link href="css/bootstrap_animation/css/animate4/animate.css" rel="stylesheet" type="text/css">

	<!--<link href="javascript/chosen/chosen.css" rel="stylesheet" type="text/css">-->

	<link href="javascript/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>

    <script src="javascript/jquery.js"></script>
    <script src="css/bootstrap4.3.1/js/popper.js"></script>
    <script src="css/bootstrap4.3.1/js/bootstrap.min.js"></script>

	<script src="javascript/jquery-ui/jquery-ui.min.js"></script>
    <script src="javascript/jquery.ui.touch-punch.min.js"></script>

	<link href="javascript/bgrins-spectrum/spectrum.css" rel="stylesheet" type="text/css">
	<script src="javascript/bgrins-spectrum/spectrum.js"></script>

	<script src="javascript/moment.min.js"></script>
	<script src="javascript/moment-with-locales.min.js"></script>
	<script src="javascript/moment-duration-format.min.js"></script>

	<script src="javascript/number_format/jquery.number.min.js"></script>

	<script src="javascript/jquery.scrollTo.min.js"></script>


	<link href="javascript/daatatables/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
	<link href="javascript/daatatables/media/css/fixedHeader.dataTables.min.css" rel="stylesheet" type="text/css">
	<link href="javascript/daatatables/Buttons-1.4.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">

    <script src="javascript/daatatables/media/js/jquery.dataTables.min.js"></script>
    <script src="javascript/daatatables/media/js/dataTables.fixedHeader.min.js"></script>
	<script src="javascript/daatatables/Buttons-1.4.2/js/dataTables.buttons.min.js"></script>
	<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.flash.min.js"></script>
	<script src="javascript/daatatables/JSZip-2.5.0/jszip.min.js"></script>
	<script src="javascript/daatatables/pdfmake-0.1.53/pdfmake.min.js"></script>
	<script src="javascript/daatatables/pdfmake-0.1.53/vfs_fonts.js"></script>
	<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.html5.min.js"></script>
	<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.print.min.js"></script>

	<script src="javascript/chosen/chosen.jquery.min.js" type="text/javascript"></script>

	<script src="javascript/viewer-master/dist/viewer.min.js"></script>
	<link  href="javascript/viewer-master/dist/viewer.min.css" rel="stylesheet">

	<script src="javascript/ajaxq/ajaxq.js"></script>

	<link id="scrollUpTheme" rel="stylesheet" href="javascript/scrollup-master/dist/css/themes/image.css">
	<script src="javascript/scrollup-master/dist/jquery.scrollUp.js"></script>
	<script src="javascript/shortcut.js"></script>

	<script src="javascript/_reeft_js/set_font_awesome_icon_type.js"></script>
	<script src="javascript/_reeft_js/date_convert.js"></script>
<style>

.btn-custom-wide {
	height:60px;
	width:210px;
}

.modal-xxl {
    max-width: 80%;
}

.modal-xl {
    max-width: 50%;
}


.border-3 {
    border-width:3px !important;
}

td .hover-img {
  position:relative;
 }
td .hover-img span {
  position:absolute; left:-9999px; top:-9999px; z-index:9999;
 }
td:hover .hover-img span {
  top: 5px;
  left:0px;
 }

 .chosen-container-single {
    min-width: 100%;
}

</style>

<script language="JavaScript">

//=============================================================================
// Globals
//=============================================================================

	// Define variables used to control table update without loading the data from server
    var myCurrentRow;
	var myGlobalRowData;
    var myGlobalTableData;

	var GLOBAL_CONFIG_TYPE_BUTTON_TEXT_A = 'Text/Char';
	var GLOBAL_CONFIG_TYPE_BUTTON_TEXT_N = 'Number/Value';
	var GLOBAL_CONFIG_TYPE_BUTTON_TEXT_L = 'Date (ISO)';
	var GLOBAL_CONFIG_TYPE_BUTTON_TEXT_T = 'Time (ISO)';

	var global_debug = 'N';

	// Add allowed Y/N
	var GLOBAL_ADD_ALLOWED 					 = 'N';
	var GLOBAL_CREATE_SHORTCUT_KEYS_FOR_LIST = 'Y';

	// Delete allowed Y/N
	var GLOBAL_DELETE_ALLOWED = 'Y';

	var jsonDataSave = {};

	var DFT_DATE_DISPLAY_FORMAT 	=  '<?php //echo $DFT_DATE_DISPLAY_FORMAT ?>';
	var DFT_LANGUAGE 				=  '<?php //echo $DFT_LANGUAGE ?>';

	var GLOBAL_TOTALPAGESSTOPVALUE	=  10;


	// Save field
	var save_WEBNAM = '';


	$(function () {
	  $.scrollUp({
		scrollName: 'scrollUp', // Element ID
		//topDistance: '1800', // Distance from top before showing element (px)
		//topSpeed: 300, // Speed back to top (ms)
		scrollDistance: '300', // Distance from top before showing element (px)
		scrollSpeed: 300, // Speed back to top (ms)
		animation: 'fade', // Fade, slide, none
		animationInSpeed: 200, // Animation in speed (ms)
		animationOutSpeed: 200, // Animation out speed (ms)
		scrollText: false, //'Scroll to top', // Text for element
		activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
	  });
	});

//=============================================================================
// Get data - prompter
//=============================================================================
function getDataPrompter( input_some_value, input_goto, input_button_number )
{


	if ( input_button_number != '' ) {
		$('#input-myCurrentPageCounter').val( input_button_number );
	}

	// Calculate offset
	var myPageGoTo 			= $('#input-myPageGoTo').val();
	var myTotalRecordsFound = $('#input-myTotalRecordsFound').val();
	var myTotalPages 		= $('#input-myTotalPages').val();
	var myPageSize 			= $('#input-myPageSize').val();


	if ( myPageSize == '' ) {
		myPageSize = '0';
	}

	let myOffSet = parseInt(myPageSize) * parseInt(input_goto);

	// Set offset
	$('#input-myPageGoTo').val( input_goto );
	$('#input-myOffSet').val( myOffSet );


	// Reset, show all
	if ( input_some_value == '*RESET' ) {
		input_some_value = '';
		$('#input-show-next-prodid').val('N');
		$('#input-search-line').val('');
		$('#input-search-moa').val('');
		$('#page-prev-button, #page-next-button').removeClass('d-none');
		$('#input-myBuildPageButtonsFirstTime').val('N');
		$('#input-search-arg' ).val( '' );
		$('#input-searchBy').val( '' )
		$('#input-prv-searchBy').val( '' )
	}

	if ( input_some_value != '' ) {
		$('#input-search-line').val( input_some_value );
	}

	// Get some data
	getData();

}

//=============================================================================
// Get data
//=============================================================================
function getData()
{

	if ( global_debug == 'Y' ) {
		console.log("Start");
		console.time("answer time");
		console.timeLog("answer time");
	}


	$('#data-result').html('<?php echo $datahub_datatable_Processing ?>').addClass('text-center');

	// Get the current search line
	var input_WEBNAM = $('#input-search-line').val();
	var input_search_arg = $('#input-search-arg').val();
	var input_searchBy = $('#input-searchBy').val();

	// Get page data
	myTotalRecordsFound 	= $('#input-myTotalRecordsFound').val();
	myTotalPages 			= $('#input-myTotalPages').val();
	myPageSize 				= $('#input-myPageSize').val();

	myPageGoTo 				= $('#input-myPageGoTo').val();
	myOffSet 				= $('#input-myOffSet').val();
	myCurrentPageCounter	= $('#input-myCurrentPageCounter').val();


	let myButtonOffSetNumber = myPageGoTo;

	if ( myButtonOffSetNumber <= 1 || myButtonOffSetNumber == '' ) {
		myButtonOffSetNumber = 1
		$('#page-prev-button').addClass('d-none');
	} else {
		//$('#page-prev-button').removeClass('d-none');
	}

	$('.pagination-badge-class').removeClass('badge-success').addClass('badge-dark');
	var selectButtonLineID = 'select-page-button-id-' + myButtonOffSetNumber;
	$('#' + selectButtonLineID).removeClass('badge-dark').addClass('badge-success');



	var myPageSize = $('#input-my-page-side').val();
	var myPageSize = 500;
	//var myOffSet = 0;

	// Create param list
	parmData = 'hub_WEBNAM=' + input_WEBNAM
			 + '&myPageGoTo=' + myPageGoTo
			 + '&myOffSet=' + myOffSet
			 + '&myPageSize=' + myPageSize
			 + '&search_arg=' + input_search_arg
			 + '&searchBy=' + input_searchBy
			 ;

	$.ajax({
		url: "HUB_WEBCNT_maintain_get.php",
		type: "GET",
		data: parmData,
		dataType: "json",
		cache: false,
	beforeSend: function( xhr ) {

	}
	})
	.done(function( jsonData ) {

				if ( global_debug == 'Y' ) {
					console.log("After RPG call");
					console.timeLog("answer time");
				}

				// Save jSon data
				jsonDataSave = jsonData;

				var myCMPNO				= jsonData.header.myCMPNO;
				var myCMPNO_Name		= jsonData.header.myCMPNO_Name;
				var myFile_name			= jsonData.header.myFile_name
				var myFile_description	= jsonData.header.myFile_description

				var returnCode 			= jsonData.header.returnCode;
				var returnMsg 			= jsonData.header.returnMsg;
				var entries_found 		= jsonData.header.entries_found;
				var response_sec 		= jsonData.header.response_sec;

				var myTotalRecordsFound = jsonData.header.myTotalRecordsFound;
				var myTotalPages 		= jsonData.header.myTotalPages;
				var myPageSize 			= jsonData.header.myPageSize;

				// Set Company and file information
				if ( myCMPNO != '' ) {
					$('#data-hub-company-information').html( '<span title="' + myFile_name + ' - ' + myFile_description + '">' + myCMPNO_Name + ' (' + myCMPNO + ')' + '</span>' ).css('font-size','1.3em');
				}

				// Update input fields
				$('#input-myTotalRecordsFound').val(myTotalRecordsFound);
				$('#input-myTotalPages').val(myTotalPages);
				$('#input-myPageSize').val(myPageSize);
				$('#input-my-page-side').val(myPageSize);

				// Celar short cut key array
				const myShortCutArray = [];

				// Init button line fields
				var HTMLlineButtons 		= '';
				var HTMLlineButtonsModal 	= '';
				var selectedButtonClass 	= 'btn-dark';

				// Create line buttons
				$.each( jsonData.header_buttons, function( index, object ){

					var buttonLine   = object.buttonLine;
					var buttonCount  = object.buttonCount;
					var buttonPages  = object.buttonPages;

					var save_buttonLine = buttonLine;

					if ( buttonLine == '*NONE' ) {
						buttonLine = 'No type';
					}

					var selectButtonLineID 		= 'select-button-line-id-' + buttonLine + '_';


					HTMLlineButtons 		+=	'<button title="Search for..." type="button" style="cursor:default" id="' + selectButtonLineID + '" class="btn ' + selectedButtonClass + ' select-button-line btn-sm mr-1 mb-1" onclick="setSearchWord(\'' + save_buttonLine + '\',\'' + '0' + '\',\'' + '' + '\',\'' + buttonPages + '\',\'' + buttonCount + '\')">'
											+ 	' <b>' + buttonLine + '</b>' + ' (' + buttonCount + ')'
											+	'</button>'

				});

				$('#data-result-button-lines').html(HTMLlineButtons);


				// Page x of xxxx
				$('#text-current-page').html( myPageGoTo );

				// Frist call - create pagination buttons
				if ( $('#input-myBuildPageButtonsFirstTime').val() == 'N' ) {
					createPaginationButtons()
					$('#input-myBuildPageButtonsFirstTime').val('Y');
					$('#select-page-button-id-1').removeClass('badge-dark').addClass('badge-success');
					$('#input-myPageGoTo').val( 1 );
					$('#input-myCurrentPageCounter').val( 1 );
					$('#page-prev-button').addClass('d-none');

					// Set info fields
					$('#text-current-page').html('1');
					$('#text-total-records-found').html(myTotalRecordsFound);
					$('#text-total-pages').html(myTotalPages);

				}


				// Hide "next page" if we are overdue
				if ( parseInt(myOffSet) > parseInt(myTotalRecordsFound) ) {
					$('#page-next-button').addClass('d-none');
				} else {
					$('#page-next-button').removeClass('d-none');
				}

					// If there are so few pages that there is not enough to build a page hide all
					if ( myTotalPages < GLOBAL_TOTALPAGESSTOPVALUE ) {
						$('#page-first-button').addClass('d-none');
						$('#page-last-button').addClass('d-none');
						$('#page-prev-button').addClass('d-none');
						$('#page-next-button').addClass('d-none');
					}



				// Show load time
				$('#load-time-from-database').html('entries found: ' + entries_found + ' (' + response_sec + ')');

				// Reset
				HTMLline02 = '<table id="REEFTvisual_data" class="table table-bordered table-striped table-hover">';

				HTMLline02 +=	'<thead>'
				           + 	'<tr class="bg-primary text-white font-weight-bold text-center">'
						   +	'<th class="text-left">'
						   +	'<?php echo $datahub_text0140 ?>'
						   +	'</th>'
						   +	'<th class="text-left">'
						   +	'<?php echo "$datahub_text0149 ($datahub_text0145)" ?>'
						   +	'</th>'
						   +	'<td class="text-left text-truncate" style="max-width:350px">'
						   +	'<?php echo $datahub_text0146 ?> 1'
						   +	'</th>'
						   +	'<td class="text-left text-truncate" style="max-width:350px">'
						   +	'<?php echo $datahub_text0146 ?> 2'
						   +	'</th>'
						   +	'<th class="text-center">'
						   +	'<?php echo $datahub_text0147 ?>'
						   +	'</th>'
						   +	'<th class="text-left text-truncate">'
						   +	'<?php echo $datahub_text0148 ?>'
						   +	'</th>'
						   +	'<th class="text-center">'
						   +	'<?php echo $datahub_text0219a ?>'
						   +	'</th>'
						   +	'<th class="text-center">'
						   +	'<?php echo $datahub_text0220a ?>'
						   +	'</th>'
						   +	'<th class="text-center">' 
						   +	'<button id="add-button" type="button" title="Shortcut: Alt+F6" onclick="dataAdd(\'' + '0' + '\')" class="btn btn-dark font-weight-bold">' + '<?php echo $datahub_button_save_01 ?>' + '</button>'
						   + 	'</th>'
						   +	'<th class="text-center">' + '</th>'
						   +	'<th class="text-center">' + '</th>'
						   +	'<th class="text-center">' + '</th>'
						   +	'<th class="text-center">' + '</th>'
						   +	'<th class="text-center">' + '</th>'
						   +	'<th class="text-center">' + '</th>'
						   +	'<th class="text-center">' + '</th>'
						   +	'</tr>'
						   +	'</thead>'
						   +	'<tbody>'
						   ;

				$.each( jsonData.data, function( index, object ){

					var counter = object.counter;
					var WEBNAM  = object.HUB_WEBNAM;
					var COUNT  	= object.HUB_COUNT;
					var LSTCAL  = object.HUB_LSTCAL;
					var DESCP1  = object.HUB_DESCP1;
					var DESCP2  = object.HUB_DESCP2;
					var SERTYP  = object.HUB_SERTYP;
					var CHRCOL  = object.HUB_CHRCOL;
					var CHRTXT  = object.HUB_CHRTXT;
					var CHRMIN  = object.HUB_CHRMIN;
					var CHRMAX  = object.HUB_CHRMAX;
					var DBGVAL  = object.HUB_DBGVAL;

					var recordOK = 'Y';


					// Show record
					if ( recordOK == 'Y' )
					{

					// Create edit button id
					let myButtonID_edit 	= WEBNAM;
					let myButtonID_delete 	= 'dlt-' + WEBNAM;

					// Save id in array
					myShortCutArray.push( myButtonID_edit );

					var LSTCAL_text = LSTCAL;


					// Create button to webservice transaction
					myButtonWebserviceTranscation = '<button type="button" class="btn btn-block btn-primary" onclick="showTranscations(\'' + 'hub_webtrn_maintain.php' + '\',\'' + WEBNAM + '\')">'
												  + WEBNAM
												  +	'</button>'


					HTMLline02 +=	'<tr>'
							   +	'<td class="text-left">'
							   +	myButtonWebserviceTranscation
							   +	'</td>'
							   +	'<td class="text-left">'
							   +    '<div title="'+ LSTCAL + '">' + LSTCAL_text + '</div>'
							   +	'</td>'
							   +	'<td class="text-left" style="max-width:350px">'
							   +		'<div class="row">'
							   +			'<div class="col-11 text-truncate">'
							   +    			DESCP1
							   +			'</div>'
							   +		'</div>'
							   +	'</td>'
							   +	'<td class="text-left" style="max-width:350px">'
							   +		'<div class="row">'
							   +			'<div class="col-11 text-truncate">'
							   +				DESCP2
							   +			'</div>'
							   +		'</div>'
							   +	'</td>'
							   +	'<td class="text-center">'
							   +	COUNT
							   +	'</td>'
							   +	'<td class="text-left">'
							   +	SERTYP
							   +	'</td>'
							   +	'<td class="text-center">'
							   +    CHRMIN
							   +	'</td>'
							   +	'<td class="text-center">'
							   +    CHRMAX
							   +	'</td>'							   
							   +	'<td>'
							   +	'<button id="' + myButtonID_edit + '" onclick="dataChange(\'' + WEBNAM + '\')" class="edit-btn btn btn-primary mr-1">' + '<?php echo $datahub_button_edit ?>' + '</button>'
							   +	'</td>'
							   +	'<td>'
							   +	'<button id="' + myButtonID_delete + '" onclick="dataDeleteConfirm(\'' + WEBNAM + '\')" class="btn btn-danger">' + '<?php echo $datahub_button_delete ?>' + '</button>'
							   +	'</td>'
							   // Save the raw data in hidden fields (see setDataTables function )
							   +	'<td class="text-left">'
							   +    DESCP1
							   +	'</td>'
							   +	'<td class="text-left">'
							   +    DESCP2
							   +	'</td>'
							   +	'<td class="text-left">'
							   +    SERTYP
							   +	'</td>'
							   +	'<td class="text-left">'
							   +    CHRCOL
							   +	'</td>'
							   +	'<td class="text-left">'
							   +    CHRTXT
							   +	'</td>'
							   +	'<td class="text-left">'
							   +    DBGVAL
							   +	'</td>'
							   +	'</tr>'
							   ;

					}

				});

				// Too see what was saved
				//console.table( myShortCutArray );


				HTMLline02  +=	'</tbody>'
				            +	'</table>'


				// Show yourself to the world, you little fvcker
				$('#data-result').html(HTMLline02);

				if ( global_debug == 'Y' ) {
					console.log("After processing json");
					console.timeLog("answer time");
				}

				// Datatables
				setDataTables();

				// Add short cut keys for first 10 entries in list, only if wanted
				GLOBAL_CREATE_SHORTCUT_KEYS_FOR_LIST = 'Y';
				if ( GLOBAL_CREATE_SHORTCUT_KEYS_FOR_LIST == 'Y' ) {
					addShortCutKeys( myShortCutArray );
				}

				if ( global_debug == 'Y' ) {
					console.log("After datatables");
					console.timeLog("answer time");
				}

				// // Set click
				// table = new DataTable('#REEFTvisual_data');
				// $('#REEFTvisual_data').on('click', 'tr', function () {
					// myD = table.row(this).data();

					// console.log(myD);
				// });


				//-----------------------------------------------------------------------
				// Reset search by
				//-----------------------------------------------------------------------
				if ( $('#input-searchBy').val() != '' )
				{
					$('#input-searchBy').val('');
					$('#input-search-arg').val('');
				}


				//-----------------------------------------------------------------------
				// Set font awesome icon type
				//-----------------------------------------------------------------------
					// Value is from config/config.php
					var iconType = '<?php echo $DFT_SET_FONT_AWESOME_ICON_TYPE ?>';
					setFontAwesomeIconType( iconType );
				//-----------------------------------------------------------------------

				if ( global_debug == 'Y' ) {
					console.log("Done");
					console.timeEnd("answer time");
				}

				//-----------------------------------------------------------------------
				// Place cursor
				//-----------------------------------------------------------------------
					$('#input-search-arg').focus();

				//-----------------------------------------------------------------------
				// Is add allowed
				//-----------------------------------------------------------------------
					if ( GLOBAL_ADD_ALLOWED == 'Y' ) {
						$('#add-button').removeClass('d-none');
					} else {
						$('#add-button').addClass('d-none');
					}
				//-----------------------------------------------------------------------




	})
	.always(function( jsonData ) {

		//console.log('I am always..');


	})
	.fail(function( xhr, ajaxOptions, thrownError ) {
		console.log('I am failed..');
		console.log( xhr );

		$('#data-result').html( '<b>Error retreiving data from the server...</b>' );

	});

}

//=============================================================================
// Set datatables
//=============================================================================
function setDataTables()
{

	// Delete allowed?
	//GLOBAL_DELETE_ALLOWED = 'N';

	if ( GLOBAL_DELETE_ALLOWED == 'Y' ) {
		var show_the_delete_button = true;
	} else {
		var show_the_delete_button = false;
	}


    $('#REEFTvisual_data').DataTable({
        "responsive": true,
		"fixedHeader": true,
		"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
		"iDisplayLength": 25,
        "processing": true,
		//"dom": '<bottom>B',
		"dom": 'lfi<bottom>Bp<"clear">',
        "order": [[ 0, "asc" ]],
		"columnDefs": [
				{
				"targets": [ 8 ],
				"visible": true,
				"searchable": false,
				 "orderable": false
				},
				// {
				// "targets": [ 7 ],
				// "visible": show_the_delete_button,
				// "searchable": false,
				 // "orderable": false
				// },
				{
					"targets": [ 9,10,11,12,13,14,15 ],
					"visible": false,
					"searchable": false,
					"orderable": false
				}
		],
		"language":
		{

					"sProcessing":   "<?php echo $datahub_datatable_Processing ?>",
					"sLengthMenu":   "<?php echo $datahub_datatable_LengthMenu ?>",
					"sZeroRecords":  "<?php echo $datahub_datatable_ZeroRecords ?>",
					"sInfo":         "<?php echo $datahub_datatable_Info ?>",
					"sInfoEmpty":    "<?php echo $datahub_datatable_InfoEmpty ?>",
					"sInfoFiltered": "<?php echo $datahub_datatable_InfoFiltered ?>",
					"sInfoPostFix":  "<?php echo $datahub_datatable_InfoPostFix ?>",
					"sLoadingRecords": "<?php echo $datahub_datatable_Processing ?>",
					"sSearch":       "<?php echo $datahub_datatable_Search ?>",
					"sUrl":          "<?php echo $datahub_datatable_Url ?>",
					"oPaginate": {
						"sFirst":    "<?php echo $datahub_datatable_First ?>",
						"sPrevious": "<?php echo $datahub_datatable_Previous ?>",
						"sNext":     "<?php echo $datahub_datatable_Next ?>",
						"sLast":     "<?php echo $datahub_datatable_Last ?>"
					}
		},
        "rowCallback": function(row, data, index)
		{



		},
        "preDrawCallback": function(settings)
		{
		},
		"initComplete": function ()
		{

		},
		"buttons": 	[
					{
						extend: 'pdf',
						text: '<img src="images/pdf_logo.png" height="25"> PDF',
						orientation: 'landscape',
						title: 'Config - Data Export - PDF',
						exportOptions: {
						columns: [0,1,2,3,4,5,11,12],
						modifier: {
							page: 'all'
							}
						}
					},
					{
						extend: 'excel',
						text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel',
						title: 'Config Data Export - Excel',
						exportOptions: {
							// Fields to export (https://datatables.net/reference/button/csv#Examples)
						columns: [0,1,2,3,4,5,11,12],
						}
					},
					{
						extend: 'copy',
						text: '<img src="images/copy.png" height="25"> Copy to Clipboard',
						title: 'Config Data Export - Copy',
						exportOptions: {
							// Fields to export (https://datatables.net/reference/button/csv#Examples)
						columns: [0,1,2,3,4,5,11,12],
						}

					}
					]
    });


	//=============================================================================
	// Setup the data to be able to update the table without reloading from the server
	//=============================================================================

		// Save the table in a global variable
		myGlobalTableData = $('#REEFTvisual_data').DataTable();

		// Handle click on "Edit" button
		$('#REEFTvisual_data tbody').on('click', '.edit-btn', function() {

			myCurrentRow 	= $(this).closest('tr');
			myGlobalRowData = myGlobalTableData.row(myCurrentRow).data();

			// Debug
			// console.log(myGlobalRowData);
			// console.log(myCurrentRow);

		});

	//=============================================================================


}

//=============================================================================
// Add short cut keys for the first 10 buttons max
//=============================================================================
function addShortCutKeys( myShortCutArray )
{

	let ii = 0;

	for (let i = 0; i < myShortCutArray.length; i++) {

		if ( i < 10 ) {

			ii = i + 1;

			if ( ii == 10 ) {
				ii = 0;
			}

			myKey = "Alt+" + ii;

			$('#' + myShortCutArray[i]).attr('title', myKey );

			shortcut.add(myKey,function() {
				if ( $('#input-mode').val() == '' ) {
					$('#' + myShortCutArray[i] ).click();
				}
			});

			//console.log(i + ' ' + myShortCutArray[i] + ' ' + myKey);

		}
	}

}


//=============================================================================
// Set search word
//=============================================================================
function setSearchWord( input_search, input_goto, input_button_number, input_totalPages, input_count )
{

	$('#input-my-page-side').val( input_count )

	$('#input-search-arg').val( input_search )
	$('#input-prv-searchBy').val( input_search )
	$('#input-searchBy').val( 'SERTYP' )

	$('#button-search').click();



}
//=============================================================================
// Scroll page - Previous
//=============================================================================
function scrollPagePrev( input_action )
{

	// Calculate offset
	var myPageGoTo 			= $('#input-myPageGoTo').val();
	var myTotalRecordsFound = $('#input-myTotalRecordsFound').val();
	var myTotalPages 		= $('#input-myTotalPages').val();
	var myPageSize 			= $('#input-myPageSize').val();

	$('#input-saveMyDirection').val( input_action );

	var myCurrentPageCounter = $('#input-myCurrentPageCounter').val();
	myCurrentPageCounter = parseInt(myCurrentPageCounter) - 1 ;


	if (myCurrentPageCounter < 1 ) {
		myCurrentPageCounter = 0;
	}


	myPageGoTo = parseInt(myPageGoTo) - 1;


	if ( myPageGoTo <= 0 ) {
		myPageGoTo = 0;
	}

	//console.log('----->' + myCurrentPageCounter + ' ' + GLOBAL_TOTALPAGESSTOPVALUE);

	// Create button behind
	if ( myCurrentPageCounter == 0 ) {
		createPaginationButtons();
		$('#input-myCurrentPageCounter').val( GLOBAL_TOTALPAGESSTOPVALUE );
	} else {
		$('#input-myCurrentPageCounter').val( myCurrentPageCounter );
	}

	if ( myPageGoTo <= 1 ) {
		console.log('I am one....')
		$('#input-myCurrentPageCounter').val( 1 );
		$('#page-prev-button').addClass('d-none');
	}

	$('#input-myPageGoTo').val( myPageGoTo );


	// Get me some data
	getDataPrompter('',myPageGoTo,'');

}

//=============================================================================
// Scroll page - Next
//=============================================================================
function scrollPageNext( input_action )
{

	// Calculate offset
	var myPageGoTo 			= $('#input-myPageGoTo').val();
	var myTotalRecordsFound = $('#input-myTotalRecordsFound').val();
	var myTotalPages 		= $('#input-myTotalPages').val();
	var myPageSize 			= $('#input-myPageSize').val();

	$('#input-saveMyDirection').val( input_action );
	$('#page-prev-button').removeClass('d-none');


	// Next page
	var myCurrentPageCounter = $('#input-myCurrentPageCounter').val();
	myCurrentPageCounter = parseInt(myCurrentPageCounter) + 1 ;

	// Next page
	myPageGoTo = parseInt(myPageGoTo) + 1;


	if ( myPageGoTo >= myTotalPages ) {
		myPageGoTo = myTotalPages;
	}

	//console.log(myCurrentPageCounter + ' ' + GLOBAL_TOTALPAGESSTOPVALUE)

	// Create button ahead
	if ( myCurrentPageCounter > GLOBAL_TOTALPAGESSTOPVALUE ) {
		$('#input-saveMyCurrentPageCounter').val( myPageGoTo - 1 );
		myCurrentPageCounter = 1;
		createPaginationButtons();
	}

	// // Create button behind
	// if ( myCurrentPageCounter == 0 ) {
		// createPaginationButtons();
	// }

	$('#input-myCurrentPageCounter').val( myCurrentPageCounter );
	$('#input-myPageGoTo').val( myPageGoTo );


	// Get me some data
	getDataPrompter('',myPageGoTo,'');

}

//=============================================================================
// Create pagination buttons
//=============================================================================
function createPaginationButtons()
{

	return;

	// Skip IBM i pagination
	//return

	// Update input fields
	var myTotalRecordsFound = $('#input-myTotalRecordsFound').val();
	var myTotalPages 		= $('#input-myTotalPages').val();
	var myPageSize 			= $('#input-myPageSize').val();
	var myPageGoTo 			= $('#input-myPageGoTo').val();


	// Check if there is enought for at whole series of buttons?
	if ( myTotalPages > GLOBAL_TOTALPAGESSTOPVALUE ) {
		myLoop = GLOBAL_TOTALPAGESSTOPVALUE;
		//$('#page-prev-button, #page-next-button').removeClass('d-none');
	} else {
		//$('#page-prev-button, #page-next-button').addClass('d-none');
		myLoop = myTotalPages;
	}

	// Init button line fields
	var HTMLPaginationButtons 	= '';
	var	myNumber 				= myPageGoTo;
	var i_am_button_number		= 0;

	// Get last direction
	let myLastDirection = $('#input-saveMyDirection').val();

	if ( myLastDirection == '*PREV' ) {
		let myStartingNumber = $('#input-saveMyCurrentPageCounter').val();
		$('#input-myCurrentPageCounter').val(GLOBAL_TOTALPAGESSTOPVALUE);
		myNumber = myStartingNumber-GLOBAL_TOTALPAGESSTOPVALUE;
		if ( myNumber < 1 ) {
			myNumber = 0;
		}
		$('#input-saveMyCurrentPageCounter').val(myNumber);
	}


	for (let i = 0; i < myLoop; i++) {


		// Increase the number
		myNumber = parseInt(myNumber) + 1;

		i_am_button_number++;

		// if ( myNumber < GLOBAL_TOTALPAGESSTOPVALUE ) {
			// i_am_a_zero = '';
		// } else {
			// i_am_a_zero = '';
		// }

		// Add 0 in front of the number if lesser than 10
		// This is get a "calm" screen
		if ( myNumber < 10 ) {
			i_am_a_zero = '0';
		} else {
			i_am_a_zero = '';
		}

		var selectButtonLineID = 'select-page-button-id-' + myNumber;

		//console.log('myNumber: ' + myNumber + ' ' + myTotalPages + ' ' + selectButtonLineID);

		// Make sure we do not get page buttons beyond last page
		if ( parseInt(myNumber) <= myTotalPages ) {

			HTMLPaginationButtons 	+=	'<span type="button" data-button-number="' + i_am_button_number + '" class="badge badge-dark p-2 mr-1 mb-1 pagination-badge-class" style="cursor:default" id="' + selectButtonLineID + '"' + 'onclick="getDataPrompter(\'' + '' + '\',\'' + myNumber + '\',\'' + i_am_button_number + '\')">'
									+ 	i_am_a_zero + myNumber
									+	'</span>'

		}
	}

	// Create "first" button
	HTMLPaginationButtons 	+=	'<span type="button" id="page-first-button" class="badge badge-dark p-2 mr-1 mb-1" style="cursor:default" id="' + selectButtonLineID + '"' + 'onclick="firstPage(\'' + '' + '\',\'' + '0' + '\',\'' + '0' + '\')">'
							+ 	'<?php echo $datahub_text0080 ?>'
							+	'</span>'

	// Create "last" button
	HTMLPaginationButtons 	+=	'<span type="button" id="page-last-button" class="badge badge-dark p-2 mr-1 mb-1" style="cursor:default" id="' + selectButtonLineID + '"' + 'onclick="lastPage(\'' + '' + '\',\'' + myTotalPages + '\')">'
							+ 	'<?php echo $datahub_text0081 ?>'
							+	'</span>'


	// Show pagination buttons
	$('#data-result-pagination-button').html(HTMLPaginationButtons);


}

//=============================================================================
// Get data - search
//=============================================================================
function searchPage( input_some_value, input_goto, input_button_number, input_totalPages )
{

	if ( input_totalPages > 0 ) {
		$('#input-myTotalPages').val( input_totalPages );
	}

	$('#input-myBuildPageButtonsFirstTime').val('N');


	getDataPrompter( input_some_value, input_goto, input_button_number )
	createPaginationButtons();
	$('#page-prev-button').addClass('d-none');
	$('#input-saveMyCurrentPageCounter').val( 1 );

}

//=============================================================================
// Get data - first page
//=============================================================================
function firstPage( input_some_value, input_goto, input_button_number, input_totalPages )
{


	if ( input_totalPages > 0 ) {
		$('#input-myTotalPages').val( input_totalPages );
	}

	$('#input-myBuildPageButtonsFirstTime').val('N');

	getDataPrompter( input_some_value, input_goto, input_button_number )
	createPaginationButtons();
	$('#page-prev-button').addClass('d-none');
	$('#input-saveMyCurrentPageCounter').val( 1 );

}

//=============================================================================
// Get data - last page
//=============================================================================
function lastPage( input_some_value, input_goto, input_button_number, input_totalPages )
{

	var myTotalPages = $('#input-myTotalPages').val();

	var input_some_value 		= '';
	var input_totalPages 	= myTotalPages;
	var input_goto 		 	= myTotalPages;

	//console.log('Last page: ' + input_goto + ' ' + GLOBAL_TOTALPAGESSTOPVALUE + ' ' + almostLastPage );

	$('#page-prev-button').removeClass('d-none');
	$('#page-next-button').addClass('d-none');

	var almostLastPage = parseInt(input_totalPages) - parseInt(GLOBAL_TOTALPAGESSTOPVALUE );

	input_some_value = '';
	input_goto = almostLastPage;
	input_button_number = 1;

	$('#input-myCurrentPageCounter').val( GLOBAL_TOTALPAGESSTOPVALUE );
	$('#input-myPageGoTo').val( almostLastPage );
	$('#input-saveMyCurrentPageCounter').val( almostLastPage );
	$('#input-saveMyDirection').val('');

	// Mark last page
	createPaginationButtons();

	// Set some fields just in case...
	$('#select-page-button-id-' + myTotalPages ).addClass('badge-success').removeClass('badge-dark');
	$('#input-myCurrentPageCounter').val( GLOBAL_TOTALPAGESSTOPVALUE );
	$('#input-myPageGoTo').val( almostLastPage );
	$('#input-saveMyCurrentPageCounter').val( almostLastPage );

	// Get data
	$('#select-page-button-id-' + input_totalPages ).click();

	// Hide next button
	$('#page-next-button').addClass('d-none');

}

//=============================================================================
// Reason addd
//=============================================================================
function dataAdd ( input_pk_type )
{

			$('#input-mode').val('*add');

			// Reset save field(s)
			save_WEBNAM = '';

			// Reset modal message
			resetModalMessage();

			// Remove key fields readonly
			$('#modal-input-WEBNAM').removeAttr('readonly','readonly');

			// Make some fields read-only
			$('.read-only-class').attr('readonly','readonly');

			$('#modal-input-WEBNAM').val('');		// DATA-HUB cfg name
			$('#modal-input-LSTCAL').val('');		// DATA-HUB cfg type
			$('#modal-input-DESCP1').val('');		// Config description
			$('#modal-input-DESCP2').val('');		// Config description
			$('#modal-input-COUNT').val('0');		// DATA-HUB cfg group
			$('#modal-input-SERTYP').val('');		// DATA-HUB cfg value
			$('#modal-input-CHRCOL').val('');		// DATA-HUB cfg value
			$('#modal-input-CHRTXT').val('');		// DATA-HUB cfg value
			$('#modal-input-CHRMIN').val('0');		// DATA-HUB cfg value
			$('#modal-input-CHRMAX').val('0');		// DATA-HUB cfg value
			$('#modal-input-DBGVAL').val('0');		// DATA-HUB cfg value

			$('#modal-input-CHRCOL').spectrum("set", '#000' );

			// Show modal
			$('#config_MaintainModal').modal('show');

			$('#config_MaintainModal').one('shown.bs.modal', function () {

				$('#modal-input-WEBNAM').trigger('focus');

			})

}

//=============================================================================
// Reason change
//=============================================================================
function dataChange( input_WEBNAM )
{

	$('#input-mode').val('*update');

	//console.table(jsonDataSave.data)

	// Find the correct data
	$.each( jsonDataSave.data, function( index, object ){

		// Get the key
		var WEBNAM			= object.HUB_WEBNAM;

		// Data found
		if ( input_WEBNAM == WEBNAM )
		{


			// Save in fields
			var WEBNAM  = object.HUB_WEBNAM;
			var LSTCAL  = object.HUB_LSTCAL;
			var DESCP1  = object.HUB_DESCP1;
			var DESCP2  = object.HUB_DESCP2;
			var COUNT   = object.HUB_COUNT;
			var SERTYP  = object.HUB_SERTYP;
			var CHRCOL  = object.HUB_CHRCOL;
			var CHRTXT  = object.HUB_CHRTXT;
			var CHRMIN  = object.HUB_CHRMIN;
			var CHRMAX  = object.HUB_CHRMAX;
			var DBGVAL  = object.HUB_DBGVAL;

			// Move to input fields
			$('#modal-input-WEBNAM').val(WEBNAM);
			$('#modal-input-LSTCAL').val(LSTCAL);
			$('#modal-input-COUNT').val(COUNT);
			$('#modal-input-SERTYP').val(SERTYP);
			$('#modal-input-CHRCOL').val(CHRCOL);
			$('#modal-input-CHRTXT').val(CHRTXT);
			$('#modal-input-CHRMIN').val(CHRMIN);
			$('#modal-input-CHRMAX').val(CHRMAX);
			$('#modal-input-DBGVAL').val(DBGVAL);

			// These fields will be updated in the shown.bs.modal further down
			// $('#modal-input-DESCP1').val(DESCP1);
			// $('#modal-input-DESCP2').val(DESCP2);


			// Save orginal name
			save_WEBNAM = WEBNAM;
			
			alert( CHRCOL )

			$('#modal-input-CHRCOL').spectrum("set", '#' + CHRCOL );

			// Make key fields readonly
			$('#modal-input-WEBNAM').attr('readonly','readonly');

			// Make some fields read-only
			$('.read-only-class').attr('readonly','readonly');

		}

	})

	// Reset modal message
	resetModalMessage();

	// Show modal
	$('#config_MaintainModal').modal('show');

	$('#config_MaintainModal').one('shown.bs.modal', function () {

		$('#modal-input-DESCP1').trigger('focus');

		// Set data from table- this will ensure that input field in modal will be correct if changed
		// before a server refresh was done.
		myDESCP1 = myGlobalRowData[10];
		myDESCP2 = myGlobalRowData[11];
		setChangedModalData( myDESCP1, myDESCP2 );

	})

}

//=============================================================================
// Delete confirm
//=============================================================================
function dataDeleteConfirm( input_WEBNAM )
{

	$('#input-mode').val('*delete');
	$('#confirm-delete-HUB_WEBNAM').val(input_WEBNAM);

	// Create confirm text
	$('#confirm-delete-text-WEBNAM').html(input_WEBNAM);

	// Find the correct data
	$.each( jsonDataSave.data, function( index, object ){


		// Get the key
		var WEBNAM			= object.HUB_WEBNAM;

		// Data found
		if ( input_WEBNAM == WEBNAM )
		{

			$('#config_confirmDeleteModal').modal('show');

		}

	})

}

//=============================================================================
// Save
//=============================================================================
function dataSave()
{
	// Reset modal message
	resetModalMessage();


	// Check content of fields
	if ( $('#modal-input-WEBNAM').val() == '' ) {
		$('#modal-message').addClass('border-bottom').html( '<?php echo $datahub_error0082 ?>' );
		$('#modal-save-button').addClass('disabled').prop("disabled", true);
		return false;
	}

	// if ( $('#modal-input-LSTCAL').val() == '' ) {
		// $('#modal-message').addClass('border-bottom').html( '<?php echo $datahub_error0083 ?>' );
		// $('#modal-save-button').addClass('disabled').prop("disabled", true);
		// return false;
	// }

	// if ( $('#modal-input-DESCP1').val() == '' ) {
		// $('#modal-message').addClass(' border-bottom').html( '<?php echo $datahub_error0084 ?>' );
		// $('#modal-save-button').addClass('disabled').prop("disabled", true);
		// $('#modal-input-DESCP1').focus();
		// return false;
	// }

	// if ( $('#modal-input-DESCP2').val() == '' ) {
		// $('#modal-message').addClass(' border-bottom').html( '<?php echo $datahub_error0085 ?>' );
		// $('#modal-save-button').addClass('disabled').prop("disabled", true);
		// $('#modal-input-DESCP1').focus();
		// return false;
	// }


	var mode = $('#input-mode').val();

	//===============================================================================
	// Remove # if any
	//===============================================================================

		// Setup remove string
		let mySaveString;

		var myWorkField = $('#modal-input-DESCP1').val();
		myWorkField = myWorkField.replace("#", "");
		$('#modal-input-DESCP1').val( myWorkField );

		var myWorkField = $('#modal-input-DESCP2').val();
		myWorkField = myWorkField.replace("#", "");
		$('#modal-input-DESCP2').val( myWorkField );
		

		var myWorkField = $('#modal-input-CHRMIN').val();
		myWorkField = myWorkField.replace(",", ".");
		myWorkField = parseFloat(myWorkField).toFixed(3).toString();
		$('#modal-input-CHRMIN').val( myWorkField );
		
		var myWorkField = $('#modal-input-CHRMAX').val();
		myWorkField = myWorkField.replace(",", ".");
		myWorkField = parseFloat(myWorkField).toFixed(3).toString();
		$('#modal-input-CHRMAX').val( myWorkField );
		
		
		var myWorkField = $('#modal-input-DBGVAL').val();
		myWorkField = myWorkField.replace(",", ".");
		myWorkField = parseFloat(myWorkField).toFixed(0).toString();
		$('#modal-input-DBGVAL').val( myWorkField );
		

	//===============================================================================

	// Make sure key does not have space and are in uppercase
	// var myWorkField = $('#modal-input-WEBNAM').val();
	// myWorkField = myWorkField.replace(" ", "_");
	// myWorkField = myWorkField.toUpperCase();
	// $('#modal-input-WEBNAM').val( myWorkField );

	// Make array and json
	var myData = $('#dataForm').find('input, select, textarea').serializeArray();

	var result = JSON.stringify(myData);

	var result = encodeURIComponent( result );
	// console.log(result);
	// console.log(myData);
	//return;

	var parmData = 'data=' + result
				 + '&mode=' + mode
				 ;

	$.ajax({
		url: "HUB_WEBCNT_maintain_save.php",
		type: "POST",
		data: parmData,
		dataType: "json",
		cache: false,
	})
	.done(function( jsonData ) {


		//=================================================================
		// START - Update the table without doing a server reload
		// Only update
		//=================================================================
		if ( mode == '*update' ) {

			event.preventDefault();

			// Get some input data from the modal window
			var modal_input_DESCP1 	= $('#modal-input-DESCP1').val();
			var modal_input_DESCP2 	= $('#modal-input-DESCP2').val();
			var modal_input_SERTYP 	= $('#modal-input-SERTYP').val();
			var modal_input_CHRCOL 	= $('#modal-input-CHRCOL').val();
			var modal_input_CHRTXT 	= $('#modal-input-CHRTXT').val();
			var modal_input_CHRMIN 	= $('#modal-input-CHRMIN').val();
			var modal_input_CHRMAX 	= $('#modal-input-CHRMAX').val();
			var modal_input_DBGVAL 	= $('#modal-input-DBGVAL').val();

			// Debug
			//console.log(myGlobalRowData[0]);
			// console.log(myGlobalRowData[1]);
			// console.log(myGlobalRowData[2]);
			// console.log(myCurrentRow);
			// console.table(myGlobalTableData);

			// Get the data for the "Change/Delete button", so we do not need to create it again
			myChangeButtonData = myGlobalRowData[8];
			myDeleteButtonData = myGlobalRowData[9];

			//==============================================
			// Use this if you want to update the whole row
			//==============================================
			// myGlobalTableData.row(myCurrentRow).data([
														// modal_input_WEBNAM,
														// modal_input_LSTCAL,
														// modal_input_DESCP1,
														// modal_input_DESCP2,
														// modal_input_COUNT,
														// modal_input_SERTYP,
														// myChangeButtonData,
														// myDeleteButtonData,
														// modal_input_DESCP1,
														// modal_input_DESCP2
													// ])
													// .draw(false)
													// ;

			//=======================================================
			// Use this if you want to update one or more table cells
			//=======================================================
			myGlobalTableData.cell(myCurrentRow, 2).data( modal_input_DESCP1 )
			myGlobalTableData.cell(myCurrentRow, 3).data( modal_input_DESCP2 )
			myGlobalTableData.cell(myCurrentRow, 5).data( modal_input_SERTYP )
			myGlobalTableData.cell(myCurrentRow, 6).data( modal_input_CHRMIN )
			myGlobalTableData.cell(myCurrentRow, 7).data( modal_input_CHRMAX )
			myGlobalTableData.cell(myCurrentRow, 10).data( modal_input_DESCP1 )
			myGlobalTableData.cell(myCurrentRow, 11).data( modal_input_DESCP2 )
			myGlobalTableData.cell(myCurrentRow, 12).data( modal_input_SERTYP )
			myGlobalTableData.cell(myCurrentRow, 13).data( modal_input_CHRCOL )
			myGlobalTableData.cell(myCurrentRow, 14).data( modal_input_CHRTXT )
			myGlobalTableData.cell(myCurrentRow, 15).data( modal_input_DBGVAL )
			.draw(false);

		}
		//=================================================================
		// END - Update the table without doing a server reload
		//=================================================================

		//=================================================================
		// Close the modal
		//=================================================================
		$('#config_MaintainModal').modal('hide');

		//=================================================================
		// Only when add
		//=================================================================
		if ( mode == '*add' ) {
			getDataPrompter('','0','');
		}


	})
	.always(function( jsonData ) {


		// Reset mode
		$('#input-mode').val('');

	})
	.fail(function( xhr, ajaxOptions, thrownError ) {
		console.log('I am failed..');
		console.log( thrownError );
		console.log( xhr );

	});

}

//=============================================================================
// Delete
//=============================================================================
function dataDeleteExec()
{
	// Reset modal message
	resetModalMessage();

	var mode = $('#input-mode').val();


	// Make array and json
	var myData = $('#dataForm-delete').find('input, select').serializeArray();
	var result = JSON.stringify(myData);

	// console.log(result);
	// console.log(myData);
	//return;

	var parmData = 'data=' + result
				 + '&mode=' + mode
				 ;

	$.ajax({
		url: "HUB_WEBCNT_maintain_save.php",
		type: "POST",
		data: parmData,
		dataType: "json",
		cache: false,
	})
	.done(function( jsonData ) {


		$('#config_confirmDeleteModal').modal('hide');
		getDataPrompter('','0','');

	})
	.always(function( jsonData ) {

	})
	.fail(function( xhr, ajaxOptions, thrownError ) {
		console.log('I am failed..');
		console.log( xhr );

	});

}

//=============================================================================
// Check if userid exists
//=============================================================================
function checkDataExists()
{

	var WZPID = $('#modal-input-WZPID').val();

	// If update, then the "orginal" code is ok
	if ( $('#input-mode').val() == '*update' ) {
		if ( WZPID == save_WZPID ) {
			return;
		}
	}

	var parmData = 'prdno=' + WZPID
				 ;

	$.ajax({
		url: "hub_wa0357_maintain_get.php",
		type: "GET",
		data: parmData,
		dataType: "json",
		cache: false,
	})
	.done(function( jsonData ) {

		var returnCode 		= jsonData.header.returnCode;
		var returnMsg 		= jsonData.header.returnMsg;
		var entries_found 	= jsonData.header.entries_found;


		if ( returnCode == '50') {
			$('#modal-message').addClass(' border-bottom').html( '<?php echo $datahub_error0080 ?>' );
			$('#modal-save-button').addClass('disabled').prop("disabled", true);
			$('#modal-input-WZPID').focus();
			$('#modal-input-WZSEQ').val( '' );
			return false;
		} else {
			DESCP = jsonData.data[0].DESCP
			$('#modal-input-WZSEQ').val( DESCP );
		}

		// Reset modal message
		resetModalMessage();

	})
	.always(function( jsonData ) {

	})
	.fail(function( xhr, ajaxOptions, thrownError ) {
		console.log('I am failed..');
		console.log( xhr );

	});

}

//=============================================================================
// Show deleted
//=============================================================================
function showDeleted()
{

	var show_deleted = $('#input-show-deleted').val();


	if ( show_deleted == 'Y' ) {
		$('#button-show-deleted').html('<?php echo $datahub_NO ?>');
		$('#input-show-deleted').val('N');
	} else {
		$('#button-show-deleted').html('<?php echo $datahub_YES ?>');
		$('#input-show-deleted').val('Y');
	}

	getDataPrompter('','0','');

}

//=============================================================================
// Show transcations
//=============================================================================
function showTranscations(url, p1, p2, p3)
{

	var url = 'hub_webtrn_maintain.php';
	var p1  = p1;
	var p2  = 'new-tab';
	var p3  = '';

	popUpCenterBig(url, p1, p2, p3);

}

//=============================================================================
// Show chart
//=============================================================================
function showChart()
{

	// Get prveious search

	var url = 'hub_webcnt_chart.php';
	var p1  = '';
	var p2  = 'new-tab';
	var p3 = $('#input-prv-searchBy').val();

	popUpCenterBig(url, p1, p2, p3);

}

//=============================================================================
// Log off
//=============================================================================
function signoff()
{

	window.location.href = "logout.php";

}

//=============================================================================
// Load page
//=============================================================================
function loadPage(url, p1, p2, p3)
{

	window.location.href = url;

}

//=============================================================================
// Reset modal message
//=============================================================================
function resetModalMessage() {

	// Reset
	//$('#modal-message').removeClass('p-2 font-weight-bold border border-danger rounded bg-light').html( '&nbsp;' );

	$('#modal-message').removeClass('border-bottom').html( '&nbsp;' );
	$('#modal-save-button').removeClass('disabled').prop("disabled", false);

}

//=============================================================================
// Clean input string
//=============================================================================
function cleanInputString( myWorkField )
{

	let charactersToRemove = '?#"\'';
	let myPattern = new RegExp('[' + charactersToRemove + ']', 'g');

	myWorkField = myWorkField.replace(myPattern,'');

	return myWorkField;

}

//=============================================================================
// Set changed modal data
//=============================================================================
function setChangedModalData( myDESCP1, myDESCP2 )
{

	$('#modal-input-DESCP1').val( myDESCP1 );
	$('#modal-input-DESCP2').val( myDESCP2 );

}

//=============================================================================
// Full screen popup
//=============================================================================
function popUpFull( url, p1, p2, p3 )
{

	var winname = 'win_' + url;

	params  = 'width='+screen.width;
	params += ', height='+screen.height;
	params += ', top=0, left=0'
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

	overview_win = window.open(url,winname, params);
	if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// screen popup - center
//=============================================================================
function popUpCenter(url, p1, p2, p3)
{

	var v1_w  = screen.availWidth;
	var v1_h  = screen.availHeight;

	if ( parseInt(v1_w) > 1800 ) {
		v1_w = 1800;
		v1_h = v1_h - 200;
		v1_center = v1_w/0.8;
	}

	// Center popup as good as possible
	var left = (screen.width - v1_w) / 2;
	var top = (screen.height - v1_h) / 4;

	var winname = 'win_' + url;

	params  = 'width='+v1_w;
	params += ', height='+v1_h;
	params += ', top=' + top + ', left=' + left;
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

	overview_win = window.open(url,winname, params);
	if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// screen popup - center - bigger
//=============================================================================
function popUpCenterBig(url, p1, p2, p3)
{

	var v1_w  = screen.availWidth;
	var v1_h  = screen.availHeight;

	// Get 25%
	v1_w_pct = v1_w * 0.18;

	v1_w_new = v1_w - v1_w_pct;


	if ( v1_w_new < 1 ) {
		v1_w_new	= 1800;
	}

	v1_w = v1_w_new;
	v1_h = v1_h - 200;
	v1_center = v1_w/0.8;

	// Center popup as good as possible
	var left = (screen.width - v1_w) / 2;
	var top = (screen.height - v1_h) / 4;

	var winname = 'win_' + url;

	params  = 'width='+v1_w;
	params += ', height='+v1_h;
	params += ', top=' + top + ', left=' + left;
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

	// Create URL
	url = url + '?webnam=' + p1 + '&input_hub_sertyp=' + p3;

	if ( p2 == 'new-tab' ) {
		overview_win = window.open(url,winname);
	} else {
		overview_win = window.open(url,winname, params);
	}

	if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// Popup top
//=============================================================================
function popUpTop(url, p1, p2, p3)
{

	var winname = 'win_' + url;

	w = 650;
	h = 750;

	params  = 'width='+w;
	params += ', height='+h;
	params += ', top=0, left=0'
	params += ', fullscreen=no';
	params += ',scrollbars=1';

	overview_win = window.open(url,winname, params);
	if (window.focus) {overview_win.focus()}
	return false;
}

//=============================================================================
// Set clock
//=============================================================================
function updateClock() {

	var currentTime = moment().format('YYYY-MM-DD HH:mm:ss');
	currentTime = REEFT_format_date( currentTime, DFT_DATE_DISPLAY_FORMAT )

	$('#current-time').html( currentTime );


}

//=============================================================================
// jQuery - Ready
//=============================================================================
$(document).ready(function()
{

	// Always clear mode controller when modal closes
	$('#config_MaintainModal').on('hide.bs.modal', function () {

		$('#input-mode').val('');

	})

	// Do not show deleted
	$('#input-show-deleted').val('Y');
	$('#input-myBuildPageButtonsFirstTime').val('N');
	$('#input-myPageGoTo').val( 1 );
	$('#input-myCurrentPageCounter').val( 0 );

	$('#page-prv-button').addClass('d-none');
	$('#page-next-button').addClass('d-none');

	// Set to input fields


	// Get data
	getDataPrompter('','0','');

	//-----------------------------------------------------------------------
	// Start the clock
	//-----------------------------------------------------------------------
		updateClock();
		setInterval(function() {
			updateClock();
		}, 1000);
	//-----------------------------------------------------------------------

	//-----------------------------------------------------------------------
	// Set font awesome icon type
	//-----------------------------------------------------------------------
		// Value is from config/config.php
		var iconType = '<?php echo $DFT_SET_FONT_AWESOME_ICON_TYPE ?>';
		setFontAwesomeIconType( iconType );
	//-----------------------------------------------------------------------

	//-----------------------------------------------------------------------
	// Delay keyup checker
	//-----------------------------------------------------------------------
	var delay = (function () {
		var timer = 0;
		return function (callback, ms) {
			clearTimeout(timer);
			timer = setTimeout(callback, ms);
		};
	})()

	let $filter01 = $('#modal-input-WZPID');
	$filter01.on('keyup', function () {
		delay(function () {
			var inputValue = $('#modal-input-WZPID').val();
			if ( inputValue != '') {
			console.log('this will hit, once user has not typed for 1 second ' + inputValue );
				checkDataExists();
			}
		}, 0800);
	});



	//-----------------------------------------------------------------------
	// Set short cuts
	//-----------------------------------------------------------------------

	// If add d-none class, do not add shortcut
	if ( GLOBAL_ADD_ALLOWED == 'Y' ) {
		shortcut.add("Alt+F6",function() {
			$('#add-button').click();
		});
	}

	shortcut.add("Enter",function() {

		// If modal is open, skip this
		if ( $('#input-mode').val() == '' ) {
			$('#button-search').click();
		}

	});

	// Place cursor in search field - best IBM i style
	shortcut.add("F9",function() {
		$('#input-search-arg').focus().select();
	});


	//=========================================================================================================
	// Set color picker - TEXT
	//
	// Create HEX value (https://en.wikipedia.org/wiki/Web_colors)
	//	var hexValueColor = color.toHexString();
	//
	//	Create RGB (https://en.wikipedia.org/wiki/RGB_color_model)
	//		hexcolor = hexcolor.replace("#", "");
	//		var r = parseInt(hexcolor.substr(0,2),16);
	//		var g = parseInt(hexcolor.substr(2,2),16);
	//		var b = parseInt(hexcolor.substr(4,2),16);
	//		var yiq = ((r*299)+(g*587)+(b*114))/1000;
	//
	//
	//	Create YIQ (https://en.wikipedia.org/wiki/YIQ)
	//		if ( yiq >= 128) {
	//			var textColor = 'black';
	//		} else {
	//			var textColor = 'white';
	//		}
	//
	//	console.log('change: ' + hexcolor + ' ' + hexValueColor + ' ' + yiq + ' ' + r + ' ' + g + ' ' + b );
	//
	//=========================================================================================================
	$(".text-color-palette").spectrum({
		showInitial: true,
		showInput: true,
		chooseText: "Vælg farve",
		cancelText: "Annuller",
		preferredFormat: "hex",
		color: "#000",
		showPalette: true,
		flat: false,
		palette: [
			["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
			["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
			["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
			["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
			["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
			["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
			["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
			["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
		],
		// Called as the original input changes. Only happens when the input is closed or the 'Choose' button is clicked.
		change: function(color) {

			// Get hex color
			var hexValueColor = color.toHexString();

		},
		move: function(color) {

			// Get hex color
			var hexValueColor = color.toHexString();

		},
		show: function(color) {

			$('#input-current-color-picker').val( this.id );

			// Get hex color
			var hexValueColor = color.toHexString();

		},
		hide: function(color) {

			// Get hex color
			var hexValueColor = color.toHexString();


		}
	});


	// Make sure scroll is active when closeing the previevwer
	$('#hub_webcnt_previewModal').on("hidden.bs.modal", function (e) { //fire on closing modal box

        if ($('.modal:visible').length) { // check whether parent modal is opend after child modal close

            $('body').addClass('modal-open'); // if open mean length is 1 then add a bootstrap css class to body of the page

			// Remove iframe data...
			$('#modal-preview-iframe').html('');

        }
    });


});
// -->
</script>

</head>

<body>

<div class="container-fluid mt-2 pl-3 pr-3">

		<input type="text" class="d-none" id="input-searchBy">
		<input type="text" class="d-none" id="input-prv-searchBy">

		<input type="text" class="d-none" id="input_some_value">
		<input type="text" class="d-none" id="input-my-page-side">

		<input type="text" class="d-none" id="input-mode" >
		<input type="text" class="d-none" id="input-show-deleted" >
		<input type="text" class="d-none" id="input-search-line">
		<input type="text" class="d-none" id="input-search-moa">
		<input type="text" class="d-none" id="input-show-next-prodid">

		<input type="text" class="d-none" id="input-myPageGoTo">
		<input type="text" class="d-none" id="input-myCurrentPageCounter">
		<input type="text" class="d-none" id="input-saveMyCurrentPageCounter">
		<input type="text" class="d-none" id="input-saveMyDirection">
		<input type="text" class="d-none" id="input-myOffSet">
		<input type="text" class="d-none" id="input-myTotalRecordsFound">
		<input type="text" class="d-none" id="input-myTotalPages">
		<input type="text" class="d-none" id="input-myPageSize">
		<input type="text" class="d-none" id="input-myBuildPageButtonsFirstTime">

		<div class="row">
			<div class="col-2">
				<img src="images/customer-logo.png" alt="Customer Logo">
			</div>
			<div class="col-8 text-center <?php echo $DFT_CLOCK_SIZE ?>">
				<i class="font-awesome-pseudo-class fa-thin fa-clock"></i>&nbsp;&nbsp;<span id="current-time"><?php echo date('d-m-Y h:i:s') ?></span>
			</div>
			<div class="col-2 text-right">
				<div class="btn btn-primary mb-1" onclick="loadPage('menu_admin.php','','','')" title="<?php echo $datahub_go_to_my_dear_home ?>"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-home"></i></div>

				<div class="d-none">
					<div class="btn btn-primary mb-1 d-none d-xl-inline-block" onclick="loadPage('menu_main.php','','','')" title="<?php echo $datahub_go_to_my_dear_home_03 ?>"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-fort"></i></div>
					<div class="btn btn-danger mb-1 d-none d-lg-inline-block"  onclick="signoff()" title="<?php echo $datahub_go_to_my_dear_home_02 ?>"><i class="font-awesome-pseudo-class fa-thin  fa-2x fa-right-from-bracket"></i></div>
				</div>

			</div>
		</div>

		<div class="row">
			<div class="col-12 text-center">
				<div id="data-hub-company-information"></div>
			</div>
		</div>


		<div class="card mt-2">
			<div class="card-header text-muted">
				<div class="row mt-2">

					<div class="col-4 h4">
						<i class="font-awesome-pseudo-class fa-thin fa-alicorn"></i> <?php echo "$datahub_text0142"; ?>
					</div>

					<div class="col-4 text-center">
						<span title="Show as chart" onclick="showChart()" style="cursor: pointer;"><i class="fa-duotone fa-4x fa-solid fa-chart-mixed" style="--fa-primary-color: orange; --fa-secondary-color: forestgreen; --fa-secondary-opacity: 0.7;"></i></span>
						<div onclick="showChart()" style="cursor: pointer;">Show chart</div>
					</div>

					<div class="col-4 text-right font-weight-bold">

							<div class="row">
								<div class="col text-right">
									<?php echo $datahub_text0059 ?> <span id="text-current-page">...</span> <?php echo $datahub_text0060 ?> <span id="text-total-pages">...</span>
								</div>
							</div>

							<div class="row">
								<div class="col text-right">
									<?php echo $datahub_text0061 ?> : <span id="text-total-records-found">...</span>
								</div>
							</div>
					</div>

				</div>
			</div>

			<div class="card-body">

						<!-- Message if screen is not wide enough -->
				<div class="container-fluid mt-2 mb-4 d-block d-lg-none">
					<div id="general-message-top" class="border border-danger rounded p-2 text-danger font-weight-boldx"><?php echo $datahub_error0040a ?></div>
				</div>
			<!-- Message if screen is not wide enough -->

				<!-- Lines found -->
				<div class="row mb-4">
					<div class="col-10">
						<div id="data-result-button-lines"></div>
					</div>
					<div class="col-2 text-right">


					</div>
				</div>


				<div class="row mb-4">
					<div class="col-2">
						<input class="form-control" type="text" id="input-search-arg" title="F9=Place cursor in search field" placeholder="Search me...">
					</div>

					<div class="col-2">
						<button type="button" id="button-search" class="brn btn-primary btn-sm mb-1" onclick="searchPage('','0')"><?php echo $datahub_button_search_icon ?></button>
						<button type="button" class="brn btn-primary btn-sm mb-1" onclick="getDataPrompter('*RESET','0','')"><?php echo $datahub_button_order_reset01_icon ?></button>
					</div>

					<div class="col-8 text-right">
						<button type="button" class="badge badge-dark p-2" id="page-prev-button" style="cursor:default" onclick="scrollPagePrev('*PREV')"><?php echo $datahub_text0078 ?></button>
						<button type="button" class="badge badge-dark p-2" id="page-next-button" style="cursor:default" onclick="scrollPageNext('*NEXT')"><?php echo $datahub_text0079 ?></button>
						<span id="data-result-pagination-button"></span>
					</div>
				</div>



				<div class="row">
					<div class="col">
						<div id="data-result"></div>
					</div>
				</div>

				<div class="row">
					<div class="col text-right">
						<small><div id="load-time-from-database"></div></small>
					</div>
				</div>

			</div>

		</div>


</div>


<!-- Set footer -->
<?php
	include "include/footer.php";
?>
<!-- Set footer -->

<!-- ========================================================================== -->
<!--                                M O D A L S                                 -->
<!-- ========================================================================== -->

<!-- Modal -->
<div class="modal fade" id="config_MaintainModal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="config_MaintainModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xxl">
    <div class="modal-content">

      <div class="modal-header bg-primary text-white">

		<div class="container-fluid pl-0 pr-0">
		<div class="row">

			<div class="col-8">
				<h5 class="modal-title" id="config_MaintainModalLabel"><i class="font-awesome-pseudo-class fa-thin fa-alicorn"></i> <?php echo $datahub_text0142 ?></h5>
			</div>

			<div class="col text-right">

			</div>
			<div class="col-1 text-right" style="max-width:20px">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">&times;</span>
				</button>
			</div>

		</div>
		</div>


      </div>
      <div class="modal-body ml-2 mr-2">

  		<input type="text" class="d-none" id="input-current-color-picker">
		<input type="text" class="d-none" id="input-current-text-color">
		<input type="text" class="d-none" id="input-current-background-color">

			<!-- Message if screen is not wide enough -->
				<div class="container-fluid mt-2 mb-4 d-block d-lg-none">
					<div id="general-message-top" class="border border-danger rounded p-2 text-danger font-weight-boldx"><?php echo $datahub_error0040a ?></div>
				</div>
			<!-- Message if screen is not wide enough -->


			<form name="dataForm" id="dataForm">

			<!-- Hidden fields start -->
			<!-- Hidden fields end -->

			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0140 ?>
				</div>
				<div class="col-3">
					<input class="form-control read-only-class" type="text" id="modal-input-WEBNAM" maxlength="20" name="modal-input-WEBNAM" onkeyup="resetModalMessage()">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0149 ?>
				</div>
				<div class="col-3">
					<input class="form-control read-only-class" type="text" onkeyup="resetModalMessage()" id="modal-input-LSTCAL" name="modal-input-LSTCAL" maxlength="1">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0147 ?>
				</div>
				<div class="col-2">
					<input class="form-control read-only-class" type="text" id="modal-input-COUNT" name="modal-input-COUNT">
				</div>
			</div>


			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0146 ?> 1
				</div>
				<div class="col-6">
					 <textarea class="form-control" id="modal-input-DESCP1" name="modal-input-DESCP1" rows="2" onkeyup="resetModalMessage()"></textarea>
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0146 ?> 2
				</div>
				<div class="col-6">
					 <textarea class="form-control" id="modal-input-DESCP2" name="modal-input-DESCP2" rows="2" onkeyup="resetModalMessage()"></textarea>
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0148 ?>
				</div>
				<div class="col-2">
					<input class="form-control" type="text" id="modal-input-SERTYP" name="modal-input-SERTYP">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0216 ?>
				</div>
				<div class="col-2">
					<input class="text-color-palette form-control" type="text" id="modal-input-CHRCOL" name="modal-input-CHRCOL">
				</div>
			</div>


			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0217 ?>
				</div>
				<div class="col-2">
					<input class="form-control" type="text" id="modal-input-CHRTXT" name="modal-input-CHRTXT">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0219 ?>
				</div>
				<div class="col-2">
					<input class="form-control" type="text" id="modal-input-CHRMIN" name="modal-input-CHRMIN">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0220 ?>
				</div>
				<div class="col-2">
					<input class="form-control" type="text" id="modal-input-CHRMAX" name="modal-input-CHRMAX">
				</div>
			</div>


			<div class="row mt-2">
				<div class="col-3">
					<?php echo $datahub_text0224 ?>
				</div>
				<div class="col-2">
					<input class="form-control" type="text" id="modal-input-DBGVAL" name="modal-input-DBGVAL">
				</div>
			</div>


			</form>

      </div>

      <div class="modal-footer-pretty modal-footer">

			<div class="container-fluid">

				<div class="row">
					<div class="col-12 text-left">
						<div class="p-1 font-weight-bold text-danger border-top border-dark " id="modal-message">&nbsp;</div>
					</div>
				</div>

				<div class="row mt-1 mb-2">
					<div class="col-3 text-left">
						<button type="button" id="modal-save-button" class="btn btn-primary btn-block" onclick="dataSave()"><?php echo $datahub_button_save ?></button>
					</div>
					<div class="col-6 text-right">
					</div>
					<div class="col-3 text-right">
						<button type="button" class="btn btn-primary btn-block" data-dismiss="modal"><?php echo $datahub_button_cancel_01 ?></button>
					</div>
				</div>

			</div>


      </div>
    </div>
  </div>
</div>




<!-- ************************************************ -->
<!--                 Confirm delete                   -->
<!-- ************************************************ -->
<div class="modal fade" id="config_confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="config_confirmDeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="config_confirmDeleteModalLabel"><?php echo $datahub_text0063 ?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

		<form name="dataForm-delete" id="dataForm-delete">

			<input type="text" class="d-none" id="confirm-delete-HUB_WEBNAM" name="confirm-delete-HUB_WEBNAM">

		</form>

		<div class="h6"><?php echo $datahub_text0062 ?>: <span class="font-weight-bold" id="confirm-delete-text-WEBNAM"></span></div>

      </div>
      <div class="modal-footer">

			<div class="container-fluid">

				<div class="row mt-1 mb-2">
					<div class="col-3 text-left">
						<button type="button" onclick="dataDeleteExec()" class="btn btn-primary">Delete</button>
					</div>
					<div class="col-6 text-right">
					</div>
					<div class="col-3 text-right">
						<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
					</div>
				</div>


			</div>
      </div>
    </div>
  </div>
</div>

<!-- ************************************************ -->
<!--                 Preview PDF and likewise         -->
<!-- ************************************************ -->
<div class="modal fade" id="hub_webcnt_previewModal" tabindex="-1" role="dialog" aria-labelledby="hub_webcnt_previewModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xxl" role="document">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h5 class="modal-title" id="hub_webcnt_previewModalLabel">Preview element</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

		<div class="container-fluid">

				<div style="background-color:#ccc" class="border border-primary border-5" id="modal-preview-iframe"></div>

				<div class="row mt-2 mb-2">
					<div class="col-3 text-left">
					</div>
					<div class="col-6 text-right">
					</div>
					<div class="col-3 text-right">
						<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
					</div>
				</div>

		</div>

			</div>

    </div>
  </div>
</div>

</body>
</html>